<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>canvas 变形</title>
		<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
		<script type="text/javascript">
		function rnd_color(){
			return parseInt(Math.random()*1000)%256;
		}
		function do_translate(ctx,x,y){
			ctx.save();
			ctx.beginPath();
			ctx.strokeStyle = "red";
			ctx.lineWidth = 3;
			//var x=0,y=0;
			for(var i=0;i<20;i++){
				ctx.fillRect(x,y,100,100);
				ctx.strokeRect(x,y,100,100);
				ctx.translate(10,10);
				var rgb = "rgb("+rnd_color()+","+rnd_color()+","+rnd_color()+")"
				console.log(rgb);
				ctx.fillStyle = rgb;
			}
			ctx.closePath();
			ctx.stroke();
			ctx.restore();
		}

		function do_scale(ctx,x,y){
			ctx.save();
			var txt = "Hello World!!!";
			ctx.font = "20px comic";
			ctx.lineWidth = 0.5;
			ctx.strokeStyle = "red";
			//y+=50;
			for(var i=2;i<12;i++){
				ctx.fillStyle = "rgb("+rnd_color()+","+rnd_color()+","+rnd_color()+")";
				ctx.translate(-x*0.2,10); //-x * (scale_x - 1)
				ctx.scale(1.2,1.2);
				ctx.fillText(txt,x,y);
				ctx.strokeText(txt,x,y);
			}			
			ctx.restore();
		}

		function do_rotate(ctx,x,y){
			ctx.save();
			var txt = "Hello World!!!";
			ctx.font = "40px comic";
			ctx.lineWidth = 1;
			ctx.strokeStyle = "red";
			ctx.translate(500,100);
		
			ctx.rotate(Math.PI/4);
			ctx.fillText(txt,x,y);
			ctx.strokeText(txt,x,y);
			ctx.restore();
		}

		function do_alpha(ctx,x,y){
			ctx.save();
			ctx.fillStyle = "rgb(63,169,245)";
			ctx.fillRect(x,y,100,100);
			//ctx.globalAlpha = 0.5;
			ctx.globalCompositeOperation = "destination-over";
			ctx.fillStyle = "rgba(255,123,172,0.8)";
			ctx.fillRect(x+50,y+50,100,100);
			ctx.restore();
		}

		function do_shadow(ctx,x,y){
			ctx.save();
			ctx.shadowBlur = 20;
			ctx.shadowColor = "rgb(0,0,0)";
			ctx.fillRect(x+20,y,100,100);
			ctx.shadowBlur = 0;
			ctx.shadowOffsetX = 10;
			ctx.shadowOffsetY = 10;
			ctx.shadowColor = "rgba(100,100,100,0.5)";
			ctx.fillRect(x+20+200,y,100,100);
			ctx.restore();
		}

		$(window).ready(function(){
			var cv = $("#cv");
			cv.attr("width","1000px");
			cv.attr("height","1000px");
			var ctx = cv.get(0).getContext("2d");
			do_translate(ctx,0,0);
			do_scale(ctx,300,5);
			do_rotate(ctx,0,400);
			do_alpha(ctx,500,500);
			do_shadow(ctx,0,700);
			var cv_data = cv.get(0).toDataURL();
			$("body").append(cv_data);
		});
		</script>
	</head>
	<body>
		<h1>canvas bianxin test</h1>
		<canvas id="cv"></canvas>
	</body>
</html>
